<!--
 * @Author: MiNine
 * @Date: 2020-09-21 10:57:25
 * @LastEditors: MiNine
 * @LastEditTime: 2020-09-27 15:07:04
 * @Description: 
-->
<template>
  <div class="sector">
    <el-table :data="pageDate.data" style="width: 100%;">
      <el-table-column label="订单名称" width="200" align="center">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.productName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户名" width="200" align="center">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>编号:{{scope.row.clientId._id}}</p>
            <div slot="reference" class="name-wrapper">
              <span>{{ scope.row.clientId.nickName }}</span>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="200" align="center">
        <template slot-scope="scope">
          <template v-if="!isUpdate[scope.row._id]||scope.row.status==6">
            <span :style="statusStyle[scope.row.status]">{{statusList[scope.row.status]}}</span>
          </template>
          <template v-else>
            <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                <span :style="statusStyle[scope.row.status]">{{statusList[scope.row.status]}}</span>
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <template v-for="item in 7">
                  <el-dropdown-item
                    :style="statusStyle[item-1]"
                    @click.native="changeStatus(scope.row._id,item-1)"
                    :key="item"
                  >{{statusList[item-1]}}</el-dropdown-item>
                </template>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </template>
      </el-table-column>
      <el-table-column label="金额信息" width="180" align="center">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>
              赔付金额:
              {{ scope.row.compensation }}
            </p>
            <div slot="reference" class="name-wrapper">
              <span>支付金额:{{scope.row.payPrice}}</span>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="时间信息" width="180" align="center">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>
              下单时间:
              <i class="el-icon-time"></i>
              {{ scope.row.payTime }}
            </p>
            <p>
              生效时间:
              <i class="el-icon-time"></i>
              {{ scope.row.inForceTime }}
            </p>
            <p>
              到期时间:
              <i class="el-icon-time"></i>
              {{ scope.row.dueTime }}
            </p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">详细信息</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="240" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="info"
            @click="addClaimDate(scope.row._id)"
            v-if="scope.row.status==6"
          >新增凭证</el-button>
          <el-button size="mini" type="primary" @click="handleEdit(scope.row._id)" v-else>更改状态</el-button>
          <el-button size="mini" type="success" @click="changeTime(scope.row._id)">续保</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row._id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageDate.currentPage"
        :page-sizes="[5,7, 10]"
        :page-size="pageDate.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageDate.total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapMutations, mapActions } = createNamespacedHelpers(
  "insureOrder"
);
const { mapMutations: mapMutations_publicStore } = createNamespacedHelpers(
  "publicStore"
);
export default {
  data() {
    return {
      adminId: sessionStorage.admin_id,
      statusList: {
        0: "已退保",
        1: "待支付",
        2: "待生效",
        3: "生效中",
        4: "已过期",
        5: "退保中",
        6: "理赔申请中(锁定)",
      },
      statusStyle: {
        0: { color: "grey" },
        1: { color: "black" },
        2: { color: "#edc988" },
        3: { color: "green" },
        4: { color: "red" },
        5: { color: "orange" },
        6: { color: "#8675a9" },
      },
      isUpdate: {},
    };
  },
  methods: {
    ...mapMutations(["setAdminId", "setPageDate"]),
    ...mapMutations_publicStore(["setNowBreadcrumb"]),
    ...mapActions([
      "getInsureOrders",
      "delInsureOrder",
      "putInsureOrder_status",
      "putInsureOrder",
    ]),
    handleEdit(_id) {
      this.$set(this.isUpdate, _id, !this.isUpdate[_id]);
    },
    //删除功能
    handleDelete(_id) {
      this.open(_id);
    },
    //删除前确定
    open(_id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const result = this.delInsureOrder({
            _id,
          });
          if (result) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          } else {
            this.$message({
              type: "info",
              message: "删除失败",
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    changeStatus(_id, status) {
      const nowStatus = this.pageDate.data.filter((item) => item._id == _id)[0]
        .status;
      //防止重复提交
      if (status == nowStatus) return;
      const result = this.putInsureOrder_status({
        _id,
        status,
      });
      this.$set(this.isUpdate, _id, false);
      if (result) {
        this.$message({
          message: "修改状态成功",
          type: "success",
        });
      }
    },
    changeTime(_id) {
      this.$prompt("请输入新续保天数(0-999)", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /^\d{1,3}$/,
        inputErrorMessage: "输入格式不正确",
      })
        .then(async ({ value }) => {
          const newDueTime = await this.putInsureOrder({
            _id,
            value,
          });
          this.$message({
            type: "success",
            message: "到期时间更新为: " + newDueTime,
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消续保",
          });
        });
    },
    addClaimDate(_id) {
      this.$router.push({
        name: "AddCompensation",
        params: {
          insureOrderId: _id,
        },
      });
    },
    //翻页相关
    handleSizeChange(val) {
      this.setPageDate({
        pageSize: val,
      });
      this.getInsureOrders();
    },
    handleCurrentChange(val) {
      this.setPageDate({
        currentPage: val,
      });
      this.getInsureOrders();
    },
  },
  computed: {
    ...mapState(["pageDate"]),
  },
  created() {
    this.setAdminId(this.adminId);
    this.getInsureOrders();
  },
};
</script>

<style lang="scss" scoped>
@import "../../../assets/scss/public/sector.scss";
.pagination {
  margin-top: 20px;
}
</style>
